<template>
  <view :style="[cusStyle]" :class="[cusClass]" class="mxp-list-item-chat" @click="onClick">
    <slot name="prefix">
      <view v-if="image" style="position: relative; margin-right: 15px">
        <mxp-image
          :width="imageSize"
          :cache="true"
          :height="imageSize"
          borderRadius="40px"
          :src="image"
          :cusStyle="imageStyle"
          v-bind="imageOption"
        ></mxp-image>
        <mxp-badge :cusStyle="{ position: 'absolute', top: '0px', right: '0px' }" :badge="badge" v-bind="badgeOption"></mxp-badge>
      </view>
    </slot>
    <view class="content-view" :style="[contentStyle]">
      <slot name="titleView">
        <view class="title-view">
          <slot name="title">
            <text class="ellipsis" :style="[{ fontSize: titleSize, color: titleColor || defThemeColor.text, maxWidth: '360rpx' }, titleStyle]">
              {{ title }}
            </text>
          </slot>
          <slot name="time">
            <text :style="[{ fontSize: timeSize, color: timeColor || defThemeColor.text3 }, timeStyle]">{{ time }}</text>
          </slot>
        </view>
      </slot>
      <slot name="subtitle">
        <text :style="[{ fontSize: subtitleSize, color: subtitleColor || defThemeColor.text2 }, subtitleStyle]">{{ subtitle }}</text>
      </slot>
      <slot name="info">
        <text class="ellipsis" :style="[{ fontSize: infoSize, color: infoColor || defThemeColor.text3, maxWidth: '360rpx' }, infoStyle]">{{ info }}</text>
      </slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import MxpBadge, { type $BadgeProps } from '../mxp-badge/mxp-badge.vue';
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import type { CSSProperties, PropType } from 'vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import mxpImage, { type $ImageProps } from '@/mxp-ui/mxp-image/mxp-image.vue';
  import { defThemeColor } from '../mxp-tool/theme/theme';
  defineOptions({
    name: 'mxp-list-item-chat',
  });
  defineProps({
    /** 图标 */
    image: { type: String, default: '' },
    /** 图标大小 */
    imageSize: { type: String as PropType<$SizeUnitStr>, default: '16px' },
    /** 图标的样式 */
    imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    /** 图标配置 */
    imageOption: { type: Object as PropType<$ImageProps>, default: () => ({}) },
    /** 角标 */
    badge: { type: [String, Number], default: '' },
    /** 角标 的配置项目 */
    badgeOption: { type: Object as PropType<$BadgeProps>, default: () => ({}) },
    /** 是否有点击效果 */
    title: { type: [String, Number], default: '' },
    /** 标题的颜色 */
    titleColor: { type: String as PropType<$AllColorStr>, default: undefined },
    /** 标题的字体大小 */
    titleSize: { type: String as PropType<$SizeUnitStr>, default: '14px' },
    /** 标题的样式 */
    titleStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    /** 箭头大小 */
    info: { type: [String, Number], default: '' },
    /** info文字大小 */
    infoSize: { type: String as PropType<$SizeUnitStr>, default: '12px' },
    /** info文字颜色 */
    infoColor: { type: String as PropType<$AllColorStr>, default: undefined },
    /** info的样式 */
    infoStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    /** 箭头大小 */
    time: { type: String, default: '' },
    /** info文字大小 */
    timeSize: { type: String as PropType<$SizeUnitStr>, default: '12px' },
    /** info文字颜色 */
    timeColor: { type: String as PropType<$AllColorStr>, default: undefined },
    /** time的样式 */
    timeStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    /** 箭头大小 */
    subtitle: { type: String, default: '' },
    /** 子标题文字大小 */
    subtitleSize: { type: String as PropType<$SizeUnitStr>, default: '12px' },
    /** 子标题文文字颜色 */
    subtitleColor: { type: String as PropType<$AllColorStr>, default: undefined },
    /** 子标题文的样式 */
    subtitleStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    /** 右边容器的样式 */
    contentStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    ...publicStyeProps,
  });
  defineSlots<{
    /** 自定义整个标题容器包含标题和子标题 */
    titleView: () => void;
    /** 自定义标题 */
    title: () => void;
    /** 自定义信息 */
    info?: () => void;
    /** 自定义子标题 */
    subtitle?: () => void;
    /** 自定义时间 */
    time?: () => void;
    /** 自定义前缀 */
    prefix?: () => void;
  }>();
  const emits = defineEmits<{
    (e: 'click'): void;
  }>();
  /** 点击事件 */
  function onClick() {
    emits('click');
  }
</script>

<style scoped lang="scss">
  .mxp-list-item-chat {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: 15px;

    .content-view {
      display: flex;
      flex: 1;
      flex-flow: column nowrap;
      align-items: stretch;
      justify-content: center;

      .title-view {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
